<template>
    <div>
        <page-main>
            <el-row>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <h1>
                        <el-page-header content="任务详情:" @back="goback" />
                    </h1>
                </el-col>
            </el-row>
        </page-main>
        <page-main>
            <el-row>
                <el-col :span="18">
                    <div style="font-size: 19px; margin: 10px;">
                        接收班级：
                        <el-tag
                            v-for="item in receive_class"
                            :key="item"
                            style="margin: 5px; font-size: 18px;"
                        >
                            {{ item }}
                        </el-tag>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                    <div align="right" style="margin-bottom: 10px;">
                        <el-button type="danger" icon="el-icon-delete" @click="deleteMessage">删除该消息</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center" align="middle">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <h3 style="color: #498dff;">日期：{{ time }}</h3>
                    <el-card class="box-card" shadow="always">
                        <!--标题预览-->
                        <h2 style="text-align: center;">{{ title }}</h2>
                    </el-card>
                    <el-card class="box-card" shadow="always">
                        <h2>内容详情：</h2>
                        <div v-for="item in message" :key="item.id" class="preview" v-html="item.message_detail" />
                    </el-card>
                    <el-card class="box-card" shadow="always">
                        <!--内容详情预览-->
                        <h2 style="color: orange;">
                            需要提交的任务结果：
                            <div
                                style="
                                        text-indent: 2em;
                                        text-decoration: underline;
                                        color: #4598f9;"
                                v-text="result_name"
                            />
                        </h2>
                        <h2 align="right">完成率：{{ finishPercent }}%</h2>
                        <div align="right">
                            <el-button type="primary" icon="el-icon-download" size="medium" @click="downloadAll">下载任务结果</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </page-main>
    </div>
</template>

<script>
import PageMain from '../../components/PageMain/index'
import api from '@/api'
import {Message} from 'element-ui'
export default {
    name: 'message.details',
    components: {PageMain},
    data() {
        return {
            title: '',
            time: '',
            message: [],
            message_detail: null,
            message_id: null,
            result_name: {},
            receive_class: [],
            result_url: {},
            finishPercent: null
        }
    },
    created() {
        // 如果无参数直接访问本页面，则会被跳转其他页面
        if (this.$route.query.type == null) {
            this.$router.push({
                path: '/teacher/manage_message'
            })
        } else { // 如果携带参数访问本页面，则进行赋值操作
            this.title = this.$route.query.type.message_title
            this.time = this.$route.query.type.time
            this.message_id = this.$route.query.type.id
        }
        // 获取消息详情信息
        api.post('teacherMessage/findTaskDetail', { message_id: this.message_id, receiver: this.receiver})
            .then(res => {
                this.message = res.data
                this.result_name = res.data[0].result_name
                this.result_url = res.data[0].result_url
            }).catch(error => {
                console.log(error)
                this.$router.push({
                    path: '/teacher/manage_message'
                })
            })
        // 获取接收的班级
        api.post('teacherMessage/findByMessageID', { message_id: this.message_id, receiver: this.receiver})
            .then(res => {
                this.receive_class = res.data
            })
        // 获取完成率
        api.post('teacherMessage/finishPercent', { message_id: this.message_id, receiver: this.receiver})
            .then(res => {
                this.finishPercent = res.data
            })
    },
    methods: {
        goback() {
            this.$router.push({path: '/teacher/manage_message'})
        },
        aa() {
            console.log(this.result_url)
        },
        downloadAll() {
            // 120.79.74.154
            window.location.href = 'http://120.79.74.154:8082/vue/download11?file_name=' + this.result_name.toString()
                + '&result_url=' + this.result_url.toString()
        },
        deleteMessage() {
            this.$confirm('是否确认删除该消息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'danger'
            }).then(() => {
                // 删除消息信息
                api.post('teacherMessage/deleteMessage', { message_id: this.message_id, receiver: this.receiver})
                    .then(res => {
                        Message.warning(res.msg)
                        this.$router.push({path: '/teacher/manage_message'})
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .preview {
        margin-top: 10px;
        // 支持数字和字母换行
        word-break: break-all;
        overflow-x: auto;
        overflow-y: auto;
        min-height: 100px;
        max-height: 530px;
        &::before {
            display: block;
        }
    }
    .center {
        text-align: center;
    }
    .mytest {
        text-indent: 2em;
    }
</style>
